<template>
    <view class="reviews">
        <!-- 为每个评论项添加点击事件 -->
        <view class="review-item" v-for="review in reviews" :key="review.id" @click="goToDetail(review.id)">
            <!-- 显示评价人的头像 -->
            <view class="avatar">
                <!-- 头像图片 -->
                <image :src="review.avatar" mode="aspectFill"></image>
            </view>
            <view class="review-content">
                <!-- 显示活动名称 -->
                <text class="activity-name">{{ review.activityName }}</text>
                <text class="review-text">{{ review.content }}</text>
                <text class="review-date">{{ review.date }}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            reviews: [
                { 
                    id: 1, 
                    content: '评价内容1', 
                    date: '2025-04-19',
                    avatar: '../../static/avatar1.png', // 评价人的头像路径
                    activityName: '活动1' // 活动名称
                },
                { 
                    id: 2, 
                    content: '评价内容2', 
                    date: '2025-04-18',
                    avatar: '../../static/avatar2.png', 
                    activityName: '活动2' 
                }
            ]
        };
    },
    methods: {
        // 点击评论项跳转详情页的方法
        goToDetail(reviewId) {
            // 这里需要根据实际情况修改详情页的路径
            uni.navigateTo({
                url: `/pages/reviewDetail/reviewDetail?id=${reviewId}`
            });
        }
    }
}
</script>

<style lang="scss">
    .reviews {
        padding: 20px;
    }
    .review-item {
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        display: flex; // 使用 Flexbox 布局
        align-items: center; // 垂直居中对齐
        cursor: pointer; // 鼠标悬停显示指针样式
    }
    .avatar {
        width: 50px;
        height: 50px;
        margin-right: 15px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid #ccc; // 添加灰色边框
    }
    .avatar image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .review-content {
        flex: 1; // 占据剩余空间
    }
    .activity-name {
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
    }
    .review-text {
        display: block;
        margin-bottom: 5px;
    }
    .review-date {
        color: #666;
        font-size: 0.9em;
    }
</style>